<template>
  <view>
    <!-- 加载动画 -->
    <orange-fullloading text="加载中" :loadshow="loadingStatus"></orange-fullloading>
    <view class="top-info" :class="topInfoStatus ? 'top-info-fix' : ''">
      <view class="header-bg bg-color" id="headerBgHeight">
        <!-- 顶部占位 -->
        <view :style="{ paddingTop: statusBarheight + 'px' }"></view>
        <!-- #ifndef MP-WEIXIN -->
        <view class="row-ac">
          <view class="ml-2 flex-1 row-ac" style="height: 55rpx;border-radius: 28rpx;background: rgba(237,237,237, .8);"
                @click="toSearch">
            <view class="ml-2 font-s-4 iconfont icon-sousuo text-light-muted"></view>
            <view class="ml-2 text-light-muted font-s-3">搜索商品</view>
          </view>
          <view class="iconfont icon-saomiao font-s-7 ml-2 text-white"></view>
          <view class="iconfont icon-xiaoxi1 font-s-7 ml-2 mr-2 text-white"></view>
        </view>
        <!-- #endif -->
        <!-- #ifdef MP-WEIXIN -->
        <view class="">
          <view class="row-ac " :style="{ width: appPussWidth + '%' }">
            <view class="ml-2 flex-1 row-ac"
                  style="height: 55rpx;border-radius: 28rpx;background: rgba(237,237,237, .8);" @click="toSearch">
              <view class="ml-2 iconfont icon-sousuo text-light-muted"></view>
              <view class="ml-2 text-light-muted">搜索商品</view>
            </view>
            <view class="iconfont icon-saomiao font-s-7 ml-2 text-white"></view>
            <view class="iconfont icon-xiaoxi1 font-s-7 ml-2 mr-2 text-white"></view>
          </view>
          <view class="" :style="{ width: watchButtonWidth + '%' }"></view>
        </view>
        <!-- #endif -->
        <view class="header-scroll p-2 text-white" v-if="categoryHeaderlist.length > 0">
          <scroll-view scroll-x class="scroll-row" :scroll-into-view="scrollInto">
            <view
              class="scroll-row-item mr-3"
              v-for="(item, index) in categoryHeaderlist"
              :key="index"
              @click="clickCategory(index)"
              :class="{ active: categoryIndex == index }"
              :id="'tab' + index"
            >
              <view class="font-s-5">{{ item.cname }}</view>
              <view class="scroll-rowing"></view>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
    <view class="header-bg" :style="{ background: headerbackground }" id="headerBgHeight">
      <!-- 顶部占位 -->
      <view :style="{ paddingTop: statusBarheight + 'px' }"></view>
      <!-- #ifndef MP-WEIXIN -->
      <view class="row-ac">
        <view class="ml-2 flex-1 row-ac" style="height: 55rpx;border-radius: 28rpx;background: rgba(237,237,237, .8);"
              @click="toSearch">
          <view class="ml-2 font-s-4 iconfont icon-sousuo text-light-muted"></view>
          <view class="ml-2 text-light-muted font-s-3">搜索商品</view>
        </view>
        <view class="iconfont icon-saomiao font-s-7 ml-2 text-white"></view>
        <view class="iconfont icon-xiaoxi1 font-s-7 ml-2 mr-2 text-white"></view>
      </view>
      <!-- #endif -->
      <!-- #ifdef MP-WEIXIN -->
      <view class="">
        <view class="row-ac " :style="{ width: appPussWidth + '%' }">
          <view class="ml-2 flex-1 row-ac" style="height: 55rpx;border-radius: 28rpx;background: rgba(237,237,237, .8);"
                @click="toSearch">
            <view class="ml-2 iconfont icon-sousuo text-light-muted"></view>
            <view class="ml-2 text-light-muted">搜索商品</view>
          </view>
          <view class="iconfont icon-saomiao font-s-7 ml-2 text-white"></view>
          <view class="iconfont icon-xiaoxi1 font-s-7 ml-2 mr-2 text-white"></view>
        </view>
        <view class="" :style="{ width: watchButtonWidth + '%' }"></view>
      </view>
      <!-- #endif -->
      <view class="header-scroll p-2 text-white" v-if="categoryHeaderlist.length > 0">
        <scroll-view scroll-x class="scroll-row" :scroll-into-view="scrollInto">
          <view
            class="scroll-row-item mr-3"
            v-for="(item, index) in categoryHeaderlist"
            :key="index"
            @click="clickCategory(index)"
            :class="{ active: categoryIndex == index }"
            :id="'tab' + index"
          >
            <view class="font-s-5">{{ item.cname }}</view>
            <view class="scroll-rowing"></view>
          </view>
        </scroll-view>
      </view>
    </view>
    <!--首页显示内容-->
    <template v-if="categoryIndex == 0">
      <view class="index-headder w-100" :style="{ background: headerbackground }" v-if="headerBanner.length > 0"></view>
      <!-- banner轮播 -->
      <view class="swiper-banner" v-if="headerBanner.length > 0">
        <swiper
          indicator-dots
          class="swiper-list"
          indicator-active-color="#fdc8cf"
          indicator-color="rgba(255,255,255,.8)"
          autoplay="true"
          @change="changeSwiper"
          interval="3000"
          circular
        >
          <swiper-item v-for="(item, index) in headerBanner" :key="index" style="width: 722rpx;height: 420rpx;"
                       class="swiper-item">
            <image :src="item.image" mode=" scaleToFill"></image>
          </swiper-item>
        </swiper>
      </view>
      <!--分类导航-->
      <view class="category-list d-f flex-wrap" v-if="categoryindexlist.length > 0">
        <view class="category-item row-a-j-fc" v-for="(item, index) in categoryindexlist" :key="index"
              v-if="index <= 10" @click="toProductList(item.id)">
          <image :src="item.cover || nopictures" mode=""></image>
          <view class="category-text">{{ item.cname }}</view>
        </view>
      </view>
      <!-- 秒杀开始 -->
      <view class="seckill-box mt-2 rounded w-710 bg-white" v-if="indexSeckillInfo.list.length>0">
        <view class="row-ac-sb  pb-3 pt-3 pl-2 pr-2">
          <view class="row-ac font-s-7 font-w" style="font-style:italic;">
            <view class="text-main-color">限时</view>
            <view>秒杀</view>
          </view>
          <view class="row-ac">
            <view class="mr-2">距离结束还剩</view>
            <view class="row-ac text-main-color">
              <view class="time-box row mr-1 bg-color">{{indexSeckillTime.hou}}</view>
              <view class="mr-1">:</view>
              <view class="time-box row mr-1 bg-color">{{indexSeckillTime.min}}</view>
              <view class="mr-1">:</view>
              <view class="time-box row mr-1 bg-color">{{indexSeckillTime.sec}}</view>
            </view>
          </view>
        </view>
        <!-- 秒杀时间 -->

        <!-- 秒杀商品列表 -->
        <view class="seckill-goods mt-3 ml-2 mr-2">
          <scroll-view scroll-x class="scroll-row">
            <view class="scroll-row-item seckill-goods-item  mr-1" v-for="(item, index) in indexSeckillInfo.list"
                  :key="index" @click="toSeckillProduct(item)">
              <view class="seckill-goods-img">
                <image :src="item.slideList.img" class="goods-img" mode=""></image>
                <view class="seckill-icon">
                  <image src="/static/img/seckill-icon.png" mode=""></image>
                </view>
              </view>

              <view class="ml-2 mr-2 mt-1 w-100">
                <view class="seckill-goods-title in1line font-s-3">{{ item.title }}</view>
                <view class="font-s-5 text-main-color font-w mt-1 ">
                  <text class="font-s-2">￥</text>
                  {{ item.seckillPrice }}
                </view>
                <view class="font-s-3 text-de mt-1 text-muted">￥{{ item.price }}</view>
              </view>
            </view>
          </scroll-view>
        </view>
        <view class="w-100 row">
          <view class="pt-2 pb-4 font-s-4" @tap="navTo('/pages/promotion/seckill')">
            查看更多秒杀商品
            <text class="iconfont icon-xiangxia font-s-3 ml-2"></text>
          </view>
        </view>
      </view>
      <!-- 推荐和热门商品 -->
      <view class="hot-recommend rounded bg-white mt-2 row-ac-sb" v-if="recommendGoodslist.length > 0">
        <view class="ml-2" style="width: 330rpx;height: 368rpx;">
          <view class="pt-2 text-danger font-w font-s-6">精品推荐</view>
          <view class="font-s-3 text-danger">精挑细选 好品推荐</view>
          <view class="mt-2 row-ac-sb">
            <view
              class="rounded goods-list d-f align-center flex-column rounded"
              style="background-color:#fff6f7;"
              v-for="(item, index) in recommendGoodslist"
              :key="index"
              v-if="index <= 1"
              @click="toProduct(item.id)"
            >
              <image :src="item.slide_list.img" class="goods-img rounded" mode=""></image>
              <view class="fon-7 font-w text-main-color mt-1">
                <text class="font-s-2">￥</text>
                {{ item.price }}
              </view>
            </view>
          </view>
        </view>
        <view class="ml-2" style="width: 330rpx;height: 368rpx;" v-if="hotGoodslist.length > 0">
          <view class="pt-2 text-primary font-w font-s-6">热门好物</view>
          <view class="text-primary font-s-3">销量排行榜冠军好物</view>
          <view class="mt-2 row-ac-sb">
            <view
              class="rounded goods-list d-f align-center flex-column rounded"
              style="background-color: #f6f6fe;"
              v-for="(item, index) in hotGoodslist"
              :key="index"
              v-if="index <= 1"
              @click="toProduct(item.id)"
            >
              <image :src="item.slide_list.img" class="goods-img rounded" mode=""></image>
              <view class="fon-7 font-w text-main-color mt-1">
                <text class="font-s-2">￥</text>
                {{ item.price }}
              </view>
            </view>
          </view>
        </view>
      </view>
      <!--新品推荐-->
      <view class="product-new">
        <view class="product-new-title row-ac-sb">
          <view class="row-ac">
            <view class="new-title">新品推荐</view>
            <view class="new-title-info row">
              <view class="iconfont icon-zan"></view>
              <view class="title-info">.优选上新99%好评</view>
            </view>
          </view>
          <view class="mr-2 font-s-3 text-light-grey" @tap="toNewProduct">
            更多
            <text class="iconfont icon-xiangxia font-s-2"></text>
          </view>
        </view>
        <view class="product-new-scroll" v-if="newGoodslist.length > 0">
          <scroll-view scroll-x class="new-scroll-view">
            <view class="scroll-item" v-for="(item, index) in newGoodslist" :key="index" @click="toProduct(item.id)">
              <view class="new-goods-box">
                <image :src="item.slide_list.img" mode="" class="goodsimg"></image>
                <view class="goods-info">
                  <view class="goods-sketch in1line">{{ item.title }}</view>
                  <view class="total-sales row">已售{{ item.sold_count }}件</view>
                  <view class="goods-price">
                    <text>￥</text>
                    {{ item.price || 0 }}
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
      <template v-if="yourLikelist.length > 0">
        <!-- 猜您喜欢 -->
        <view class="guess-like row bg-white">
          <view style="width: 220rpx;height: 4rpx;border-radius: 2rpx;background: #C8C7CC;"></view>
          <view class="guesses-like ml-2 mr-2 text-hover-warning">猜您喜欢</view>
          <view style="width: 220rpx;height: 4rpx;border-radius: 2rpx;background: #C8C7CC;"></view>
        </view>
        <product-list :list="yourLikelist"></product-list>
      </template>
    </template>
    <!--大分类的商品列表-->
    <template v-if="categoryIndex > 0">
      <!--这里是占位-->
      <view class="mt-2"></view>
      <!--大分类的二级分类，跳转到二级分类列表-->
      <view class="category-list d-f flex-wrap"
            :class="otherCategoryMenuList.length > 5 ? 'category-list-h2' : 'category-list-h1'">
        <view class="category-item row-a-j-fc" v-for="(item, index) in otherCategoryMenuList" :key="index"
              v-if="index <= 10" @click="toProductList(item.id)">
          <image :src="item.cover || nopictures" mode=""></image>
          <view class="category-text">{{ item.cname }}</view>
        </view>
      </view>
      <view class="mt-2">
        <!--这里显示大分类列表-->
        <product-list :list="indexCategoryGoodsList"></product-list>
      </view>
    </template>
  </view>
</template>

<script>
import {
  getCategoryIndex,
  getNewGoods,
  getBanner,
  getHotGoods,
  recommendGoods,
  getLikeGoodsUrl,
  getCategory,
  getCategoryList as getCategoryListUrl,
  getCartListUrl,
  getSystemConfigUrl,
  getSeckillIndexUrl,
  getConfigUrl
} from '@/api/index'
import productList from '@/components/common/product-list' //商品列表公共组件

export default {
  components: {
    productList
  },
  data () {
    return {
      headerbackground: '#EC2D37',
      statusBarheight: '',
      headerBgHeight: '',
      //如果在微信小程序登陆的显示效果
      // #ifdef MP-WEIXIN
      appPussWidth: '',
      watchButtonWidth: '',
      // #endif
      categoryIndex: 0,
      scrollInto: '',
      scrollIntoTime: '',
      categoryHeaderlist: [],
      categoryindexlist: [],
      headerBanner: [],
      seckillTime: this.$json.seckillTime,
      nopictures: this.$Management.nopictures,
      newGoodslist: [],
      yourLikelist: [],
      recommendGoodslist: [],
      hotGoodslist: [],
      likeGoodsIdList: [],
      // 保存顶部菜单下面所有的二级菜单
      topMenuAllCategoryList: [],
      // 顶部菜单选中状态下的二级菜单
      otherCategoryMenuList: [],
      indexCategoryGoodsList: [],
      otherMenuGoodsHttpObj: {
        categoryId: '',
        pageSize: 10,
        page: 0
      },
      loadingStatus: true,
      topInfoStatus: false,
      indexSeckillInfo: {
        list: []
      },
      indexSeckillTime: {
        hou: 0,
        min: 0,
        sec: 0
      }
    }
  },
  onLoad () {
    this.initData()
  },
  // 上划加载
  onReachBottom () {
    this.onReachBottomHandle()
  },
  // 页面往下滚动事件
  onPageScroll (res) {
    const scrollTop = res.scrollTop
    if (scrollTop >= 100) {
      this.topInfoStatus = true
    } else {
      this.topInfoStatus = false
    }
  },
  //获取屏幕信息
  created () {
    let obj = {}
    // #ifdef MP-WEIXIN
    obj = wx.getMenuButtonBoundingClientRect()
    // #endif

    uni.getSystemInfo({
      success: res => {
        this.width = obj.left || res.windowWidth
        this.statusBarheight = res.statusBarHeight + 5 //获取顶部状态栏高度+3个像素

        //微信右上角胶囊按纽占比
        // #ifdef MP-WEIXIN
        this.watchButtonWidth = ((obj.width + 10) / res.windowWidth) * 100
        this.appPussWidth = 100 - this.watchButtonWidth
        // #endif
      }
    })
  },
  methods: {
    async initData () {
      await this.getCategoryIndexlist()
      await this.getNewGoodslist()
      await this.getHeaderBanner()
      await this.getYourLike()
      await this.getRecommendGoods()
      await this.hotGoods()
      await this.getTopCategoryList()
      await this.getAPPConfig()
      await this.getSeckillIndex()
      // 异步延迟加载
      setTimeout(() => {
        this.loadingStatus = false
      }, 100)
    },
    // 首页秒杀商品
    getSeckillIndex () {
      let httpObj = { page: 1, pageSize: 8 }
      this.$R.get(getSeckillIndexUrl, httpObj).then(res => {
        this.indexSeckillInfo = res.data
        console.log(this.indexSeckillInfo)
        if (this.indexSeckillInfo.list.length <= 0) {
          return false
        }
        // 获取当前时间
        let date1 = new Date()
        // 去掉时间戳的毫秒
        let nowTime = Number(String(date1.getTime()).substring(0, 10))
        console.log(nowTime)
        // 计算当前时间和秒杀活动的剩余时间
        let surplusTime = this.indexSeckillInfo.endAt - nowTime
        if (surplusTime > 0) {
          this.indexSeckillTime.hou = parseInt((surplusTime % (60 * 60 * 24)) / 3600) < 10 ? ('0' + parseInt((surplusTime % (60 * 60 * 24)) / 3600)) : parseInt((surplusTime % (60 * 60 * 24)) / 3600)
          this.indexSeckillTime.min = parseInt(((surplusTime % (60 * 60 * 24)) % 3600) / 60) < 10 ? ('0' + parseInt(((surplusTime % (60 * 60 * 24)) % 3600) / 60)) : parseInt(((surplusTime % (60 * 60 * 24)) % 3600) / 60)
          this.indexSeckillTime.sec = parseInt(((surplusTime % (60 * 60 * 24)) % 3600) % 60) < 10 ? ('0' + parseInt(((surplusTime % (60 * 60 * 24)) % 3600) % 60)) : parseInt(((surplusTime % (60 * 60 * 24)) % 3600) % 60)
        }
        let timer = setInterval(() => {
          --this.indexSeckillTime.sec
          if (this.indexSeckillTime.sec < 0) {
            this.indexSeckillTime.sec = 59
            --this.indexSeckillTime.min
            if (this.indexSeckillTime.min < 0) {
              this.indexSeckillTime.min = 59
              --this.indexSeckillTime.hou
              if (this.indexSeckillTime.hou < 0) {
                // 如果秒杀结束，清除倒计时，重新获取秒杀接口
                clearInterval(timer)
                this.getSeckillIndex()
              }
            }
          }
        }, 1000)


        console.log(this.indexSeckillTime)
      })
    },
    //获取banner
    getHeaderBanner () {
      this.$R.get(getBanner).then(res => {
        this.headerBanner = res.data
      })
    },
    //轮播图背景颜色改变
    changeSwiper (e) {
      const index = e.detail.current
      const headerBanner = this.headerBanner
      this.headerbackground = headerBanner[index].color
    },
    cliickSeckillTime (index) {
      if (this.seckillTimeIndex === index) {
        return
      }
      this.seckillTimeIndex = index
      this.scrollIntoTime = 'time' + index
    },
    // 顶部菜单点击事件
    clickCategory (index) {
      if (this.categoryIndex === index) {
        return
      }
      this.categoryIndex = index
      this.scrollInto = 'tab' + index
      if (this.categoryIndex != 0) {
        // 因为包含首页，所以要index-1才是正确的
        this.otherCategoryMenuList = this.topMenuAllCategoryList[index - 1].children
        this.otherMenuGoodsHttpObj.categoryId = this.topMenuAllCategoryList[index - 1].id
        this.indexCategoryGoodsList = []
        this.otherMenuGoodsHttpObj.page = 0
        this.getOtherMenuGoodsList()
      }
    },
    getCategoryIndexlist () {
      this.$R.get(getCategoryIndex).then(res => {
        this.categoryindexlist = res.data
        this.categoryHeaderlist = [{ id: 0, cname: '首页' }, ...this.categoryindexlist]
      })
    },
    getNewGoodslist () {
      this.$R.get(getNewGoods).then(res => {
        this.newGoodslist = res.data.list
      })
    },
    // 触底事件
    onReachBottomHandle () {
      // 如果是在首页菜单下面触底
      if (this.categoryIndex == 0) {
        this.getYourLike()
      } else {
        this.getOtherMenuGoodsList()
      }
    },
    //获取猜您喜欢
    async getYourLike () {
      await this.$R.post(getLikeGoodsUrl + '?ids=[' + this.likeGoodsIdList + ']').then(res => {
        // 没有数据，给个提示
        if (res.data.length <= 0) {
          return uni.showToast({
            title: '别划了，我已经到底线了',
            icon: 'none',
            duration: 3000
          })
        }
        if (this.yourLikelist.length == 0) {
          this.yourLikelist = [...res.data]
        } else {
          this.yourLikelist = [...this.yourLikelist, ...res.data]
        }
        this.likeGoodsIdList = []
        this.yourLikelist.forEach(item => {
          this.likeGoodsIdList.push(item.id)
        })
      })
    },
    // 获取一级商品下面的商品
    getOtherMenuGoodsList () {
      this.otherMenuGoodsHttpObj.page++
      this.$R.get(getCategoryListUrl, this.otherMenuGoodsHttpObj).then(res => {
        // 没有数据，给个提示
        if (res.data.list.length <= 0) {
          return uni.showToast({
            title: '已经到触碰到我的底线啦',
            icon: 'none',
            duration: 3000
          })
        }
        if (this.indexCategoryGoodsList.length == 0) {
          this.indexCategoryGoodsList = [...res.data.list]
        } else {
          this.indexCategoryGoodsList = [...this.indexCategoryGoodsList, ...res.data.list]
        }
      })
    },

    // 获取右边
    hotGoods () {
      this.$R.get(getHotGoods).then(res => {
        this.hotGoodslist = res.data.list
      })
    },
    getRecommendGoods () {
      this.$R.get(recommendGoods).then(res => {
        this.recommendGoodslist = res.data.list
      })
    },
    // 获取所有分类，供顶部菜单点击时切换
    getTopCategoryList () {
      this.$R.get(getCategory).then(res => {
        this.topMenuAllCategoryList = res.data
      })
    },
    // 获取基本信息配置
    getAPPConfig () {
      this.$R.get(getConfigUrl).then(res => {
        console.log(res)
        this.$store.commit('setAppConfigMutations', res.data)
        console.log(this.$store.state.appConfig)
      })
    },
    //微信跳转到搜索页面
    toSearch () {
      uni.navigateTo({
        url: '/pages/index/search/search'
      })
    },
    toLogin () {
      uni.navigateTo({
        url: '/pages/public/login'
      })
    },
    toProductList (categoryId) {
      uni.navigateTo({
        url: '/pages/product/list?type=category&id=' + categoryId
      })
    },
    // 跳转到秒杀商品详情页
    toSeckillProduct (productInfo) {
      uni.navigateTo({
        url: `/pages/product/product?productId=${productInfo.id}&pageStatus=seckill&activeId=${productInfo.activityId}&productStatus=1`
      })
    },

    toNewProduct () {
      uni.navigateTo({
        url: '/pages/product/newproducts'
      })
    },
    navTo (url) {
      uni.navigateTo({
        url
      })
    },
    toProduct (productId) {
      uni.navigateTo({
        url: '/pages/product/product?productId=' + productId
      })
    }
  }
}
</script>

<style lang="scss">
  page {
    background-color: $uni-bg-color-grey;
  }

  .top-info {
    display: none;
  }

  .top-info-fix {
    position: fixed;
    top: 0;
    right: 0;
    left: 0rpx;
    z-index: 999999;
    animation: topAnima 0.5s ease;
    display: block;
  }

  @keyframes topAnima {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .header-bg {
    .scroll-rowing {
      width: 50rpx;
      height: 8rpx;
      border-radius: 4rpx;
      margin: 10rpx auto 0;
    }

    .active .scroll-rowing {
      background-color: #ffffff;
    }
  }

  .index-headder {
    height: 230rpx;
    border-radius: 0 0 60rpx 60rpx;
  }

  .swiper-banner {
    width: 722rpx;
    margin: -230rpx 14rpx 19rpx;

    .swiper-list {
      width: 722rpx;
      height: 350rpx;

      .swiper-item {
        width: 722rpx;
        height: 350rpx;

        image {
          width: 100%;
          height: 100%;
          border-radius: 10rpx;
        }
      }
    }
  }

  .category-list {
    width: 722rpx;
    margin: 0 14rpx;
    background-color: #ffffff;
    border-radius: 10rpx;

    .category-item {
      width: 20%;
      height: 168rpx;

      image {
        height: 100rpx;
        width: 100rpx;
        border-radius: 50%;
      }

      .category-text {
        font-size: 26rpx;
        color: #676767;
        margin-top: 10rpx;
      }
    }
  }

  .category-list-h1 {
    height: 168rpx;
  }

  .category-list-h2 {
    height: 336rpx;
  }

  .seckill-box {
    .time-box {
      width: 50rpx;
      height: 40rpx;
      border-radius: 8rpx;
    }

    .seckill-time {
      width: 670rpx;
      height: 112rpx;

      .seckill-time-item {
        width: 25%;
        height: 112rpx;

        .seckill-state {
          color: #7f7f7f;
        }

        .time-line {
          width: 100%;
          height: 5rpx;
        }
      }

      .active .time-line {
        background-color: $bg-main-color;
      }

      .active .state-line {
        font-weight: 900;
        color: $bg-main-color;
      }
    }

    .seckill-goods {
      width: 670rpx;
      height: 360rpx;

      .seckill-goods-item {
        width: 192rpx;
        height: 360rpx;

        .seckill-goods-img {
          width: 192rpx;
          height: 192rpx;

          .goods-img {
            width: 192rpx;
            height: 192rpx;
          }

          .seckill-icon {
            width: 120rpx;
            height: 45rpx;
            margin-top: -202rpx;
            position: relative;

            image {
              border-radius: 0 0 23rpx 0;
            }
          }
        }
      }
    }
  }

  .hot-recommend {
    width: 722rpx;
    height: 368rpx;
    margin-left: 14rpx;
    margin-right: 14rpx;

    .goods-list {
      width: 154rpx;
      height: 222rpx;

      .goods-img {
        margin-top: 6rpx;
        width: 142rpx;
        height: 142rpx;
      }
    }
  }

  .product-new {
    width: 722rpx;
    height: 520rpx;
    margin: 20rpx 14rpx 0 14rpx;
    border-radius: 12rpx;
    background: -webkit-gradient(linear, 0 50%, 0 100%, from(#fcd290), to(#fee9cb));
    margin-top: 20rpx;

    .product-new-title {
      width: 722rpx;
      height: 88rpx;

      .new-title {
        font-size: 38rpx;
        font-weight: 900;
        color: #724200;
        margin-left: 20rpx;
      }

      .new-title-info {
        width: 260rpx;
        height: 33rpx;
        margin-left: 26rpx;
        background: $bg-light-color;
        border-radius: 12rpx 0 12rpx 0;
        color: #ffffff;

        .title-info {
          font-size: 26rpx;
          font-weight: 900;
        }

        .iconfont {
          font-size: 25rpx;
        }
      }
    }

    .product-new-scroll {
      width: 682rpx;
      height: 390rpx;
      margin: 0 20rpx;

      .new-scroll-view {
        width: 100%;
        white-space: nowrap;

        .scroll-item {
          display: inline-block;
          width: 216rpx;
          height: 390rpx;
          background: #ffffff;
          margin-right: 17rpx;
          border-radius: 8rpx;

          .new-goods-box {
            width: 206rpx;
            height: 370rpx;

            .goodsimg {
              width: 206rpx;
              height: 206rpx;
              border-radius: 8rpx;
              margin: 5rpx;
            }

            .goods-info {
              width: 196rpx;
              margin: 10rpx 20rpx;

              .goods-sketch {
                width: 196rpx;
                height: 35rpx;
                font-size: 27rpx;
                font-weight: 900;
              }

              .total-sales {
                width: 140rpx;
                height: 34rpx;
                font-size: 22rpx;
                margin-top: 15rpx;
                border-radius: 12rpx 0 12rpx 0;
                background: $bg-light-color;
                color: #ffffff;
              }

              .goods-price {
                font-size: 32rpx;
                margin-top: 15rpx;
                font-weight: 900;
                color: $bg-main-color;

                text {
                  font-size: 18rpx;
                }
              }
            }
          }
        }
      }
    }
  }

  .guess-like {
    width: 720rpx;
    height: 105rpx;
    margin: 20rpx 15rpx 0 15rpx;

    .guesses-like {
      font-weight: bold;
      font-size: 38rpx;
      margin: 0 12rpx;
    }
  }

  .category-like {
    width: 720rpx;
    margin: 0 15rpx;

    .cate-like {
      position: relative;
      width: 352rpx;
      height: 550rpx;
      background: #ffffff;
      margin-bottom: 15rpx;
      border-radius: 12rpx;

      image {
        height: 352rpx;
        width: 352rpx;
        border-radius: 12rpx;
      }

      .cate-text {
        height: 72rpx;
        margin-left: 12rpx;
        font-size: 28rpx;
        margin-top: -17rpx;
      }

      .in2line {
        display: -webkit-box !important;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2;
      }

      .cate-item {
        display: flex;
        align-items: center;

        .cate-price {
          margin-top: 16rpx;
          margin-left: 8rpx;
          color: #f83434;
          font-size: 32rpx;
        }

        .cate-tariff {
          margin-top: 16rpx;
          margin-left: 16rpx;
          font-size: 22rpx;
          color: #676767;
          text-decoration: line-through;
        }
      }

      .cate-comment {
        margin-top: 8rpx;
        margin-left: 14rpx;
        font-size: 24rpx;
        color: #676767;
      }
    }
  }
</style>
